<template>
<div>
  <!-- 面包屑 -->
  <bread-crumb :names="['首页','商品管理','商品列表']"></bread-crumb>
  <!-- 卡片 -->
      <h2>此页面为开发人员测试页,您可不予理会</h2>
  <el-card>
    <!-- 搜索框和添加商品 -->
     <el-row :gutter='40'>
        <el-col :span="8" >
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            clearable
            v-model='searchStr'
            @clear='searchGoods'
          >
            <el-button slot="append" icon="el-icon-search" @click="searchGoods" class="search-btn" ></el-button>
          </el-input>
        </el-col>
        <el-col :span='4'><el-button type='primary' @click="toAddPage" >添加商品</el-button></el-col>
      </el-row>
      <!-- 表格 -->
        <goods-list-table :search='searchStr' ref='goodsTable' :showAddDialogVisible='showAddDialogVisible'></goods-list-table>
  </el-card>
</div>


</template>

<script>
import BreadCrumb from 'common/BreadCrumb'
import GoodsListTable from './goodslistChildren/GoodsListTable'
export default {
        name:'GoodsList',
        components:{BreadCrumb,GoodsListTable},
        data(){
          return {
            searchStr:'',
            showAddDialogVisible:false,
          }
        },
        methods:{
          searchGoods(){
                this.$bus.$emit('searchGoods',this.searchStr)
          },
          toAddPage(){
            this.$router.push('/home/goods/addgoods')
          }
        }
}
</script>

<style scoped>
</style>